<template>
	<div class="mine">
		<!--<mine-head></mine-head>-->	
		<main-list></main-list>
		<create-song></create-song>
		<collection-song></collection-song>
		<transition name="songdetails1">
			<div class="songdetailsBox" v-show="isShowSongdetails2">
				<songdetails></songdetails>
			</div>
		</transition>
	</div>
</template>

<script>
	import mineHead from './children/mineHead.vue';
	import mainList from './children/mainList.vue';
	import createSong from './children/createSong.vue';
	import collectionSong from './children/collectionSong.vue'
	import songdetails from './children/songdetails.vue'
	export default {
		name: "mine",
		components: {
			mineHead,
			mainList,
			createSong,
			collectionSong,
			songdetails
		},
		props: {},
		data() {
			return {
				
			};
		},
		watch: {},
		computed: {
			isShowSongdetails2(){
//				console.log(this.$store.state.isShowSongdetails)
				return this.$store.state.isShowSongdetails
			}
		},
		methods: {

		},
		created() {},
		mounted() {
			
		}
	};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.songdetails1-enter{
	transform: translateY(100%);
}
.songdetails1-enter-active{
	transition: 1s all;
}
.songdetails-enter-to{
	transform: translateY(0);
}
/*.songanimate{
	transform: translateY(0);
}*/
	.mine{
		/*position: relative;*/
		.songdetailsBox{
			height: 100vh;
			width: 100vw;
			position: fixed;
			top: 0;
			bottom: 0;
			background: #fff;
			z-index: 10000;
			/*transform: translateY(100%);*/
		}
	}
</style>